<template>
  <div>
    <!-- 待关联 -->
    <div class="items">
      <div class="title">
        <span class="i"></span>
        <!-- 待确认患者关联 -->
        <span>{{title}}</span>
      </div>
      <!-- 待关联list -->
      <van-list v-model="loading"
                :immediate-check="false"
                :finished="finished"
                :finished-text="list.length === 0 ? '没有更多数据了' : ''"
                @load="getMoreList">
        <div style="margin-bottom: 5px"
             @click="detail(ins, i.id)"
             v-for="(i,ins) in list"
             :key="ins">
          <Card :entity="i"
                :funIndex="funIndex"></Card>
        </div>
      </van-list>
    </div>
    <!-- 关联-拒绝患者弹出层 -->
    <van-popup v-model="patientShow"
               closeable
               position="center">
      <div class="patient-box">
        <div class="nick-name">{{patientInfo.nickname}}</div>
        <span class="mobile">手机号：{{patientInfo.mobile}}</span>
        <span>住院号/门诊号：{{patientInfo.admission_number}}</span>
        <van-field  v-model="carcinoma" placeholder="请输入癌种信息" />
        <div class="ctrl-box">
          <div class="btn btn1"
               @click="handleRelation(false, patientInfo.id)">拒绝</div>
          <div class="btn"
               @click="handleRelation(true, patientInfo.id)">关联</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { associationConfirmed, evaluateList, fillPrescriptionList, vomitList, operationAssociated } from '@/api/medical'
import Card from './Card.vue'
export default {
  components: { Card },
  props: {
    title: {
      type: String,
      default: ''
    },
    funIndex: {
      type: Number,
      default: 0
    }
  },
  name: '',
  data () {
    return {
      carcinoma: '', // 胃癌
      page_index: 0,
      page_size: 20,
      loading: false,
      finished: false,
      list: [],
      patientShow: false, // 弹出层
      patientInfo: {} // 弹出层用户信息
    }
  },
  mounted () {
    this.getMoreList()
  },
  methods: {
    async getMoreList () {
      // TODO TEST vant-list 分页逻辑
      this.page_index += 1
      const { page_index, page_size } = this
      const _f = [associationConfirmed, evaluateList, fillPrescriptionList, vomitList]
      const { code, msg, data } = await _f[this.funIndex]({ page_index, page_size })
      this.loading = false
      if (code !== 1) {
        this.finished = true
        return this.$toast.fail(msg)
      }
      if (this.page_index === 1) this.list = []
      if (this.funIndex === 3) {
        //! 报告恶心列表 有一个vomiting字段是json串 这里单独处理一下要
        const _data = data.data.map(it => ({ ...it, vomiting: JSON.parse(it.vomiting) }))
        this.list.push(..._data || [])
      } else {
        this.list.push(...data.data || [])
      }
      if (this.list.length >= data.total) {
        this.finished = true
      }
    },
    async detail (index, id) {
      console.log(this.funIndex, index)
      // 待确认患者关联
      if (this.funIndex === 0) {
        this.patientShow = true
        this.patientInfo = this.list[index]
      }
      // 待评估患者关联
      if (this.funIndex === 1) {
        this.$router.push('/home_/handle_pg?id=' + id)
      }
      // 待补处方患者
      if (this.funIndex === 2) {
        // const _p = { id: this.list[index].id }
        // const { data, code, msg } = await fillPrescription(_p)
        // if (code !== 1) return this.$toast.fail(msg)
        // console.log(data)
        const data = this.list[index]
        this.$router.push({
          path: '/yihu/yihumation',
          query: {
            id: data.id,
            risk: data.risk,
            recommend: data.recommend,
            dranitsaris: data.dranitsaris,
            cinv_prescription: data.cinv_prescription
          }
        })
      }
      // 报告恶心呕吐患者
      if (this.funIndex === 3) {
        this.$router.push({
          path: '/user/Information',
          query: {
            id: this.list[index].id,
            date: this.list[index].vomiting[0].date
          }
        })
      }
    },
    // 拒绝或同意患者关联
    async handleRelation (flag, id) {
      if (!this.carcinoma && flag) return this.$toast.fail('癌种信息为必填项')
      const { msg, code } = await operationAssociated({ status: flag ? '1' : '-1', id, carcinoma: this.carcinoma })
      if (code !== 1) return this.$toast.fail(msg)
      this.patientShow = false
      this.$toast.success(flag ? '已同意该患者关联' : '已拒绝该患者关联')
      // TODO刷新一下数据
      this.page_index = 0
      this.getMoreList()
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-popup {
  width: 70%;
  border-radius: 8px;
}
.items {
  width: 100%;
  .title {
    width: 100%;
    height: 34px;
    margin: 8px auto;
    .i {
      display: inline-block;
      margin-right: 5px;
      width: 3px;
      height: 14px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      opacity: 1;
    }
    span {
      display: inline-block;
      height: 22px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 22px;
      color: #4182ff;
      opacity: 1;
    }
  }
}
.patient-box {
  width: 100%;
  margin-top: 20px;
  // background-color: red;
  font-size: 18px;
  padding: 20px 30px;
  box-sizing: border-box;

  .nick-name {
    font-weight: bold;
    font-size: 16px;
    color: #161616;
  }
  span {
     font-size: 14px;
     color: #161616;
     display: block;
     margin-top: 10px;
  }
  /deep/.van-field {
    margin-top: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #4182ff;
  }
  .ctrl-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .btn {
      width: 90px;
      background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
      border-radius: 6px;
      font-size: 14px;
      color: #ffffff;
      line-height: 50px;
      text-align: center;
      height: 50px;
    }
  }
}
</style>
